<!--<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>-->
<!--<c:set var="path" value="${pageContext.request.contextPath}" />-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>人脸采集</title>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="description" content="人脸采集">

<link rel="stylesheet" type="text/css"
	href="/Medical_Instrument/statics/css/faceLogin.css" />
<script type="text/javascript"
	src="/Medical_Instrument/statics/js/login/jquery-1.12.4.js"></script>
<script type="text/javascript"
	src="/Medical_Instrument/statics/lib/layer/2.4/layer.js"></script>
<style>
body {
	height: 100%;
	background: #213838;
	overflow: hidden;
}

canvas {
	z-index: -1;
	position: absolute;
}
</style>
<script src="/Medical_Instrument/statics/js/login/jquery.js"></script>
<script src="/Medical_Instrument/statics/js/login/verificationNumbers.js"></script>
<script src="/Medical_Instrument/statics/js/login/Particleground.js"></script>
<script>
	$(document).ready(function() {
		//粒子背景特效
		$('body').particleground({
			dotColor : '#5cbdaa',
			lineColor : '#5cbdaa'
		});
		//验证码
		createCode();
		//测试提交，对接程序删除即可
		$(".submit_btn").click(function() {
			localhost.href = "index.jsp";
		});
	});
</script>


<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	height: 100vh;
	background-position: center;
	overflow: hidden;
}

h1 {
	color: #fff;
	text-align: center;
	font-weight: 100;
	margin-top: 40px;
}

#media {
	width: 280px;
	height: 250px;
	margin: 10px auto 0;
	border-radius: 30px;
	overflow: hidden;
	opacity: 0.7px;
}

#canvas {
	display: none;
}

#btn {
	width: 160px;
	height: 50px;
	background: #BBFFFF;
	margin: 70px auto 0;
	text-align: center;
	line-height: 50px;
	color: #BBFFFF;
	border-radius: 40px;
}
</style>
</head>

<body>

	<form action="${path}/faceService/faceGather" method="post">
		<input type="hidden" id="operatorId" value="${operatorId}" />
		<dl class="admin_login">
			<dt>
				<strong>人脸采集</strong><em>Management System</em> <strong>请把你的脸放摄像头面前</strong>
			</dt>
			<div id="media">
				<video id="video" width="530" height="300" autoplay></video>
				<canvas id="canvas" width="400" height="300"></canvas>
			</div>
			<dd>
				<input type="button" onclick="query()" value="人脸采集"
					class="submit_btn" id="facegather" />
			</dd>
		</dl>
		<script type="text/javascript">
			//var 是定义变量
			var video = document.getElementById("video"); //获取video标签
			var context = canvas.getContext("2d");
			var con = {
				audio : false,
				video : {
					width : 1980,
					height : 1024,
				}
			};

			//导航 获取用户媒体对象
			navigator.mediaDevices.getUserMedia(con).then(function(stream) {
				video.src = window.URL.createObjectURL(stream);
				video.onloadmetadate = function(e) {
					video.play();
				};
			});

			function query() {
				$("#facegather").val("人脸采集中...");

				//把流媒体数据画到convas画布上去
				context.drawImage(video, 0, 0, 400, 300);
				var base = getBase64();
				$.ajax({
					type : "post",
					url : "${path}/faceService/faceGather",
					data : {
						"operatorId" : $("#operatorId").val(),
						"image_type" : base
					},
					success : function(data) {
						var obj = JSON.parse(data);
						if (obj.result == "success") {
							location.href = "${path}/operator/getOperatorList";
						} else if (obj.result == "no_liveness") {
							layer.msg("活体检测失败!", {
								icon : 5,
								time : 2000
							});

						} else if (obj.result == "false") {
							layer.msg("没有注册该人脸!", {
								icon : 5,
								time : 2000
							});

						} else {
							layer.msg("面容识别失败,请继续验证!", {
								icon : 5,
								time : 2000
							});
						}
						;
						$("#facegather").val("人脸采集");
					},
					error : function(data) {
						$("#facegather").val("人脸采集");
					}
				});

			}
			function getBase64() {
				var imgSrc = document.getElementById("canvas").toDataURL(
						"image/png");
				return imgSrc.split("base64,")[1];

			};
		</script>
	</form>
</body>
</html>
